<template>
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-container>
        <el-main class="main">
          <div class="content">
            <el-row :gutter="40" style="height: 40px">
              <el-col
                :span="5"
                style="float: left; margin-top: 12px; font-size: 20px"
              >
                <span>网络发现设备列表</span>
              </el-col>
              <el-col :span="5" style="float: right; margin-top: 12px">
                <el-button
                  type="primary"
                  size="small"
                  @click="networkSettingClick"
                  style="float: right; margin-left: 8px"
                  >发现配置</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click="addNetworkRule"
                  style="float: right; margin-left: 8px"
                  >新增发现</el-button
                >
              </el-col>
              <el-col :span="8" style="margin-top: 16px">
                <span float="right"
                  >服务器:<el-tag size="mini" type="success">启用</el-tag></span
                >

                <!--<span float="right">网络设备:<el-tag size="mini" type="warning">部分启用</el-tag></span>-->
                <span float="right"
                  >网络设备:<el-tag size="mini" type="danger"
                    >禁用</el-tag
                  ></span
                >

                <span float="right"
                  >ICMP Ping:<el-tag size="mini" type="danger"
                    >禁用</el-tag
                  ></span
                >
              </el-col>
            </el-row>
            <el-row align="center" style="margin-top: 10px">
              <el-table
                :data="currentPageNetworkAgent"
                v-loading="networkLoading"
                :row-style="{ height: '52px' }"
                stripe
                style="width: 100%"
                :height="tableHeight"
                :cell-style="{ padding: '0' }"
              >
                <el-table-column
                  type="index"
                  align="center"
                  label="序号"
                  width="70"
                  :index="networkIndexMethod"
                />
                <el-table-column
                  prop="hostName"
                  label="设备名称"
                  align="center"
                />
                <el-table-column prop="ip" label="IP地址" align="center" />
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <el-tag
                      size="mini"
                      :type="
                        scope.row.hostStatus === 'true' ? 'success' : 'danger'
                      "
                    >
                      {{
                        scope.row.hostStatus === "true"
                          ? "IP地址唯一"
                          : "IP地址冲突"
                      }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="100">
                  <template slot-scope="scope">
                    <div>
                      <!--<el-button  type="success" size="mini" icon="el-icon-check" @click="handleCreateByNetworkRule(scope.row)">添加设备</el-button>-->
                      <div v-if="scope.row.hostStatus === 'true'">
                        <el-button
                          type="success"
                          size="mini"
                          icon="el-icon-check"
                          @click="handleCreateByNetworkRule(scope.row)"
                          >添加设备</el-button
                        >
                      </div>
                      <div v-if="scope.row.hostStatus === 'false'">
                        <el-button
                          disabled
                          type="danger"
                          size="mini"
                          icon="el-icon-close"
                          >添加设备</el-button
                        >
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!--:page-size="pageSize"-->
              <el-pagination
                :current-page="networkPage.currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="networkSearchAgentsTotal"
                @current-change="network_handleCurrentChange"
                style="text-align: center"
              />
            </el-row>
          </div>
          <!-- 新增标签弹层 -->
          <div class="add-form">
            <el-dialog
              title="新增设备"
              :visible.sync="dialogFormVisible"
              v-if="dialogFormVisible"
              width="1000px"
            >
              <el-form
                :model="formData"
                :rules="rules"
                ref="formData"
                label-width="100px"
              >
                <!--设备操作的用户名与密码: 类型判断为'1'即服务器类型，才弹出此填写框-->
                <el-row :gutter="4" v-if="formData.type === '1'">
                  <el-col :span="8">
                    <el-form-item label="用户名" prop="username">
                      <el-input
                        v-model="formData.username"
                        placeholder="设备的操作用户"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="密码" prop="password">
                      <el-input
                        v-model="formData.password"
                        placeholder="设备的操作密码"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!--设备名-->
                <el-row :gutter="4">
                  <el-col :span="8">
                    <el-form-item label="设备名称" prop="host">
                      <el-input
                        v-model="formData.host"
                        placeholder="全局唯一，不可重复"
                      />
                    </el-form-item>
                  </el-col>
                  <!--          <el-col :span="8">-->
                  <!--            <el-form-item label="设备型号" prop="hostType">-->
                  <!--              <el-input v-model="formData.hostType" />-->
                  <!--            </el-form-item>-->
                  <!--          </el-col>-->
                  <el-col :span="8">
                    <el-form-item label="设备类型" prop="type">
                      <!--多选加上multitude-->
                      <el-select
                        v-model="formData.type"
                        @change="isShowInfo"
                        placeholder="请选择"
                      >
                        <el-option label="服务器" value="1"></el-option>
                        <el-option label="交换机" value="2"></el-option>
                        <el-option label="防火墙" value="3"></el-option>
                        <el-option label="单向网闸" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--接口-->
                <el-row :gutter="5">
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="设备类型" prop="type">-->
                  <!--                &lt;!&ndash;多选加上multitude&ndash;&gt;-->
                  <!--                <el-select v-model="formData.type" @change="isShowInfo" placeholder="请选择">-->
                  <!--                  <el-option label="服务器" value="1" ></el-option>-->
                  <!--                  <el-option label="交换机" value="2" ></el-option>-->
                  <!--                  <el-option label="防火墙" value="3" ></el-option>-->
                  <!--                  <el-option label="单向网闸" value="4" ></el-option>-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="CPU型号" prop="cpuType">-->
                  <!--                <el-select v-model="formData.cpuType" placeholder="请选择">-->
                  <!--                  <el-option label="酷睿i9" value="酷睿i9" ></el-option>-->
                  <!--                  <el-option label="酷睿i7" value="酷睿i7" ></el-option>-->
                  <!--                  <el-option label="酷睿i5" value="酷睿i5" ></el-option>-->
                  <!--                  <el-option label="Ryzen Threadripper" value="Ryzen Threadripper" ></el-option>-->
                  <!--                  <el-option label="Ryzen 9" value="Ryzen 9" ></el-option>-->
                  <!--                  <el-option label="Ryzen 7" value="Ryzen 7" ></el-option>-->
                  <!--                  <el-option label="Ryzen 5" value="Ryzen 5" ></el-option>-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                </el-row>
                <!--          &lt;!&ndash; 是否使用批量添加 &ndash;&gt;-->
                <!--          <el-form-item label="批量添加">-->
                <!--            <el-checkbox style="float: left" :checked="false" true-label="1" false-label="0"></el-checkbox>-->
                <!--          </el-form-item>-->
                <!--agent-->
                <el-row :gutter="2">
                  <el-col :span="8">
                    <el-form-item label="ip地址" prop="ip">
                      <el-input v-model="formData.ip" />
                    </el-form-item>
                  </el-col>
                  <!--              <el-col :span="8">-->
                  <!--                <el-form-item label="DNS名称" prop="dns">-->
                  <!--                  <el-input v-model="formData.dns"/>-->
                  <!--                </el-form-item>-->
                  <!--              </el-col>-->
                  <el-col :span="8">
                    <el-form-item label="端口" prop="port">
                      <el-input v-model="formData.port" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <!--                <el-col :span="5" style="margin-right: 120px">-->
                  <!--                <el-form-item label="连接到" prop="useip">-->
                  <!--                  <el-radio-group v-model="formData.useip">-->
                  <!--                    <el-radio-button label="IP" value="1" style="width:40px;height:40px"></el-radio-button>-->
                  <!--                    <el-radio-button label="DNS" value="0" style="width:40px;height:40px"></el-radio-button>-->
                  <!--                  </el-radio-group>-->
                  <!--                </el-form-item>-->
                  <!--              </el-col>-->
                  <!--              <el-col :span="8">-->
                  <!--                <el-form-item label="端口" prop="port">-->
                  <!--                  <el-input v-model="formData.port"/>-->
                  <!--                </el-form-item>-->
                  <!--              </el-col>-->
                </el-row>
                <!--agentSystemType(linux or windows)-->
                <div v-if="!snmpIsShow">
                  <el-row :gutter="4">
                    <el-col :span="8">
                      <el-form-item label="系统" prop="systemType">
                        <el-select v-model="formData.systemType">
                          <el-option value="1" label="Linux" />
                          <el-option value="2" label="Windows" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!--              <el-col :span="8">-->
                    <!--                <el-form-item label="内存" prop="memory">-->
                    <!--                  <el-select v-model="formData.memory">-->
                    <!--                    <el-option value="英伟达" label="英伟达"/>-->
                    <!--                    <el-option value="影驰" label="影驰"/>-->
                    <!--                    <el-option value="金士顿" label="金士顿"/>-->
                    <!--                    <el-option value="三星" label="三星"/>-->
                    <!--                    <el-option value="惠普" label="惠普"/>-->
                    <!--                  </el-select>-->
                    <!--                </el-form-item>-->
                    <!--              </el-col>-->
                  </el-row>
                </div>
                <!--SNMP-->
                <div v-if="snmpIsShow">
                  <el-row>
                    <el-col :span="7">
                      <el-form-item label="SNMP版本" prop="version">
                        <el-select
                          v-model="formData.version"
                          style="width: 200px"
                        >
                          <el-option value="1" label="SNMPv1" />
                          <el-option value="2" label="SNMPv2" />
                          <el-option value="3" label="SNMPv3" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="13">
                      <el-form-item label="SNMP社区" prop="community">
                        <el-input
                          v-model="formData.community"
                          style="width: 400px"
                        />
                      </el-form-item>
                    </el-col>
                    <!--                                        <el-col :span="4">-->
                    <!--                                            <el-checkbox label="使用大量请求" name="bulk" v-model="formData.bulk" :checked="true" true-label="1" false-label="0"></el-checkbox>-->
                    <!--                                        </el-col>-->
                  </el-row>
                </div>
                <!--设备群组-->
                <!--          <el-row>-->
                <!--            <el-col :span="7">-->
                <!--              <el-form-item label="设备群组" prop="groupIds">-->
                <!--                <el-select v-model="formData.groupIds" multiple placeholder="请选择" style="width: 200px">-->
                <!--                  <el-option-->
                <!--                      v-for="item in groupOptions"-->
                <!--                      :key="item.groupid"-->
                <!--                      :label="item.name"-->
                <!--                      :value="item.groupid"-->
                <!--                  />-->
                <!--                </el-select>-->
                <!--              </el-form-item>-->
                <!--            </el-col>-->
                <!--          </el-row>-->
                <!--          &lt;!&ndash;templates&ndash;&gt;-->
                <!--          <el-row>-->
                <!--            <el-col :span="7">-->
                <!--              <el-form-item label="模板" prop="templateIds">-->
                <!--                <el-select v-model="formData.templateIds" multiple placeholder="请选择" style="width: 200px">-->
                <!--                  <el-option-->
                <!--                      v-for="item in templateOptions"-->
                <!--                      :key="item.templateid"-->
                <!--                      :label="item.host"-->
                <!--                      :value="item.templateid"-->
                <!--                  />-->
                <!--                </el-select>-->
                <!--              </el-form-item>-->
                <!--            </el-col>-->
                <!--          </el-row>-->
                <!--描述信息-->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="描述信息" prop="description">
                      <el-input
                        v-model="formData.description"
                        type="textarea"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="(dialogFormVisible = false), (networkLoading = false)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="handleAdd('formData')"
                  :disabled="networkLoading"
                  >确定</el-button
                >
              </div>
            </el-dialog>
          </div>
          <!--主机名和密码-->
          <el-dialog
            title="请输入该主机的账号和密码"
            :visible.sync="hostSettingdialogVisible"
            width="30%"
            @closed="resetInfo"
          >
            <!-- 输入账号 -->
            <el-row>
              <el-col :span="3" style="padding-top: 10px"
                ><label>账号：</label></el-col
              >
              <el-col :span="20"
                ><el-input
                  v-model="hostAccount"
                  placeholder="请输入账号"
                ></el-input
              ></el-col>
            </el-row>
            <br />
            <!-- 输入密码 -->
            <el-row>
              <el-col :span="3" style="padding-top: 10px"
                ><label>密码：</label></el-col
              >
              <el-col :span="20"
                ><el-input
                  v-model="hostPassword"
                  show-password
                  placeholder="请输入密码"
                ></el-input
              ></el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
              <el-button @click="hostSettingdialogVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  operateway == '0'
                    ? postShutdownRequest()
                    : postRebootRequest()
                "
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!--网络发现规则配置-->
          <div class="networkRuleSetting">
            <el-dialog
              :visible.sync="networkRuleSettingVisible"
              v-if="networkRuleSettingVisible"
              width="1000px"
              align="center"
            >
              <el-table
                :data="currentPageNetworkRule"
                v-loading="networkTypeLoading"
                height="313px"
                :row-style="{ height: '52px' }"
                stripe
                style="width: 100%"
                :cell-style="{ padding: '0' }"
              >
                <el-table-column
                  type="index"
                  align="center"
                  label="序号"
                  width="70"
                  :index="networkSettingIndexMethod"
                />
                <el-table-column
                  prop="details.name"
                  label="规则名称"
                  width="250"
                  align="center"
                />
                <el-table-column
                  prop="details.iprange"
                  label="IP地址范围"
                  align="center"
                />
                <el-table-column prop="type" label="类型" align="center" />

                <el-table-column
                  prop="details.status"
                  label="状态"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.details.status === '0'">
                      <el-tag type="success" size="small">启用</el-tag>
                    </div>
                    <div v-else-if="scope.row.details.status === '1'">
                      <el-tag type="danger" size="small">禁用</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="150">
                  <template slot-scope="scope">
                    <div>
                      <!--<el-button  type="primary" size="mini" icon="el-icon-edit" >修改</el-button>-->
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-circle-check"
                        v-show="scope.row.details.status === '1'"
                        @click="activeNetwork(scope.row)"
                        >启用</el-button
                      >
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-circle-close"
                        v-show="scope.row.details.status === '0'"
                        @click="banNetwork(scope.row)"
                        >禁用</el-button
                      >
                      <el-button
                        type="warning"
                        size="mini"
                        icon="el-icon-s-release"
                        @click="deleteNetworkRule(scope.row)"
                        >删除</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!--:page-size="pageSize"-->
              <el-pagination
                :current-page="networkSettingPage.currentPage"
                :page-size="5"
                layout="total, prev, pager, next, jumper"
                :total="networkSearchRuleTotal"
                @current-change="networkSetting_handleCurrentChange"
                style="text-align: center"
              />
            </el-dialog>
          </div>
          <!--网络发现规则新增-->
          <div class="addNetworkRuleDialog">
            <el-dialog
              title="新增发现规则"
              :visible.sync="addNetworkRuleSettingVisible"
              v-if="addNetworkRuleSettingVisible"
              width="500px"
            >
              <el-form
                :model="networkFormData"
                :rules="rules"
                ref="networkFormData"
                label-width="100px"
              >
                <!--规则名-->
                <el-row :gutter="4">
                  <el-col>
                    <el-form-item label="规则名称" prop="ruleName">
                      <el-input v-model="networkFormData.ruleName" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="4">
                  <el-col :span="22">
                    <el-form-item label="搜索ip范围" prop="ipRange">
                      <el-input v-model="networkFormData.ipRange" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" align="center" style="margin-top: 5px">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="bottom-end"
                    >
                      <i
                        class="el-icon-question"
                        @mouseover="adivceInfoClick()"
                      ></i>
                      <div style="width: 400px" slot="content">
                        IP地址范围. 可能的格式如下:<br />
                        单个IP: 192.168.1.33<br />
                        IP段: 192.168.1-10.1-255.
                        范围受限于覆盖地址的总数（小于64K）。<br />
                        子网掩码: : 192.168.4.0/24<br />
                        支持的子网掩码:<br />
                        ①IPv4 地址： /16 - /30 <br />
                        ②IPv6 地址： /112 - /128 <br />
                        IP列表: 192.168.1.1-255, 192.168.2.1-100, 192.168.2.200,
                        192.168.4.0/24<br />
                      </div>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <el-row :gutter="4">
                  <el-col>
                    <el-form-item label="设备类型" prop="ruleType">
                      <!--多选加上multitude-->
                      <el-select
                        v-model="networkFormData.ruleType"
                        @change="isShowSNMPInfo"
                        placeholder="请选择"
                      >
                        <el-option label="服务器" value="1"></el-option>
                        <el-option label="网络设备" value="2"></el-option>
                        <el-option label="ICMP Ping" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div v-if="snmpIsShow_net">
                  <el-row :gutter="4">
                    <el-col :span="18">
                      <el-form-item label="SNMP社区" prop="community">
                        <el-input v-model="networkFormData.community" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-button
                        size="small"
                        type="primary"
                        @click="getSnmpComuunityByXML"
                        >导入配置</el-button
                      >
                      <!--<el-dropdown>-->
                      <!--<span class="el-dropdown-link">导入配置<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
                      <!--    <el-dropdown-menu slot="dropdown">-->
                      <!--        <el-dropdown-item v-for="(name,index) in communitSettingList" :key="index" :command="name" >{{name}}</el-dropdown-item>-->
                      <!--    </el-dropdown-menu>-->
                      <!--</el-dropdown>-->
                    </el-col>
                  </el-row>
                </div>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addNetworkRuleSettingVisible = false"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  @click="handleAddNetwork('networkFormData')"
                  >确定</el-button
                >
              </div>
            </el-dialog>
          </div>
          <!--社区配置导入-->
          <div class="communitLoadDialog">
            <el-dialog
              :visible.sync="communitySettingVisible"
              v-if="communitySettingVisible"
              width="500px"
            >
              <el-table
                :data="currentPageCommunity"
                width="100%"
                @row-click="handleSelectionChange"
              >
                <el-table-column
                  prop="name"
                  label="名称"
                  width="100"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="community"
                  label="社区号"
                  width="350"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
              <div style="margin-top: 30px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="communityData.community_total"
                  :page-size="5"
                  :current-page="communityData.community_current_page"
                  @current-change="community_current_change"
                >
                </el-pagination>
              </div>
            </el-dialog>
          </div>
        </el-main>
        <vFootSpace />
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  name: "NetworkSearchList",
  data() {
    return {
      networkSearchAgents: [], //网络发现设备列表
      networkSearchAgentsTotal: 0, //发现设备总数
      networkLoading: true,
      networkPage: {
        currentPage: 1,
        pageSize: 10,
      },
      dialogFormVisible: false,
      formData: {}, // 添加表单
      userInfo: {
        userName: "",
        password: "",
        hostId: "",
      }, //用户表单
      snmpIsShow: false,
      hostSettingdialogVisible: false, // 主机管理表单
      hostAccount: "", //主机账户
      hostPassword: "", //主机密码
      rules: {
        // 校验规则
        host: [
          { required: true, message: "设备名称为必填项", trigger: "blur" },
          {
            pattern: /^(?![a-zA-Z]*$)(?![0-9]*$)[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/,
            message: "以非数字开头的6-20位字母和数字组合",
            trigger: "blur",
          },
        ],
        // groupIds: [{ required: true, message: '主机群组为必填项', trigger: 'blur' }],
        type: [{ required: true, message: "类型为必填项", trigger: "blur" }],
        username: [
          { required: true, message: "用户名为必填项", trigger: "blur" },
          { pattern: /^.{1,20}$/, message: "长度为1-20位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码为必填项", trigger: "blur" },
          { pattern: /^.{1,30}$/, message: "长度为1-30位" },
        ],
        version: [{ required: true, message: "版本为必填项", trigger: "blur" }],
        systemType: [
          { required: true, message: "系统类型为必选项", trigger: "blur" },
        ],
        ip: [
          { required: true, message: "IP地址为必填项", trigger: "blur" },
          {
            pattern: /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/,
            message: "非法IP地址",
            trigger: "blur",
          },
        ],
        useip: [{ required: true, message: "连接为必填项", trigger: "blur" }],
        community: [
          { required: true, message: "社区为必填项", trigger: "blur" },
          { pattern: /^.{1,32}$/, message: "长度为1-32位", trigger: "blur" },
        ],
        port: [
          { required: true, message: "端口为必填项", trigger: "blur" },
          {
            pattern: /^([1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-4])$/,
            message: "非法的端口号",
            trigger: "blur",
          },
        ],
        description: [
          { required: false, trigger: "blur", type: "string" },
          { pattern: /^.{0,2048}$/m, message: "长度为0-2048位" },
        ],
        userName: [
          { required: true, message: "用户名为必填选项", trigger: "blur" },
          { pattern: /^.{1,20}$/, message: "长度为1-20位" },
        ],
        ruleName: [
          {
            required: true,
            pattern: "[^ \x22]+",
            message: "规则为必填项",
            trigger: "blur",
          },
          { pattern: /^.{1,20}$/, message: "长度为1-20位" },
        ],
        ipRange: [
          { required: true, message: "搜索ip范围为必填项", trigger: "blur" },
        ],
        ruleType: [
          { required: true, message: "类型为必填项", trigger: "blur" },
        ],
      },
      tableHeight: 0.748 * document.body.clientHeight,
      networkRuleSettingVisible: false, // 网络设备可见性
      currentPageNetworkSetting: [], // 网络规则数据
      networkTypeLoading: false,
      networkSettingPage: {
        currentPage: 1,
        pageSize: 5,
      },
      addNetworkRuleSettingVisible: false,
      networkFormData: {
        ruleName: "",
        ipRange: "",
        ruleType: "",
        community: "",
      },
      snmpIsShow_net: false,
      networkSearchRuleTotal: 0,
      communitySettingVisible: false,
      communitSettingList: [],
      communityData: {
        community_total: 0,
        community_current_page: 1,
        pageSize: 5,
      },
      tipText_ip:
        "IP地址范围. 可能的格式如下:\n" +
        "单个IP: 192.168.1.33\n" +
        "IP段: 192.168.1-10.1-255. 范围受限于覆盖地址的总数（小于64K）。\n" +
        "子网掩码: : 192.168.4.0/24\n" +
        "支持的子网掩码:\n" +
        "/16 - /30 for IPv4 addresses\n" +
        "/112 - /128 for IPv6 addresses\n" +
        "IP列表: 192.168.1.1-255, 192.168.2.1-100, 192.168.2.200, 192.168.4.0/24\n" +
        "此字段支持空格，表格和多行。",
    };
  },
  computed: {
    // 计算当页的设备
    currentPageNetworkAgent: function () {
      let start =
        (this.networkPage.currentPage - 1) * this.networkPage.pageSize;
      let end = start + this.networkPage.pageSize;
      if (end >= this.networkSearchAgents.length)
        end = this.networkSearchAgents.length;
      //截取字符串
      return this.networkSearchAgents.slice(start, end);
    },
    // 计算当页的规则
    currentPageNetworkRule: function () {
      let start =
        (this.networkSettingPage.currentPage - 1) *
        this.networkSettingPage.pageSize;
      let end = start + this.networkSettingPage.pageSize;
      if (end >= this.currentPageNetworkSetting.length)
        end = this.currentPageNetworkSetting.length;
      //截取字符串
      return this.currentPageNetworkSetting.slice(start, end);
    },
    // 计算当页的社区号
    currentPageCommunity: function () {
      let start = (this.communityData.community_current_page - 1) * 5;
      let end = start + 5;
      if (end >= this.communitSettingList.length)
        end = this.communitSettingList.length;
      //截取字符串
      console.log(this.communitSettingList);
      return this.communitSettingList.slice(start, end);
    },
  },
  // 钩子函数，VUE对象初始化完成后自动执行
  mounted() {
    this.handleNetworkSearch();
  },
  methods: {
    // 网络设备页面序号连续
    networkIndexMethod(index) {
      return (
        index +
        (this.networkPage.currentPage - 1) * this.networkPage.pageSize +
        1
      );
    },
    networkSettingIndexMethod(index) {
      return (
        index +
        (this.networkSettingPage.currentPage - 1) *
          this.networkSettingPage.pageSize +
        1
      );
    },
    // 点击发现设备
    handleNetworkSearch() {
      this.$axios
        .get("/networkSearch/getAllNetworkAgents.action", { timeout: 5 * 1000 })
        .then((res) => {
          if (res.data.status) {
            this.networkSearchAgents = res.data.content.content;
            this.networkSearchAgentsTotal = this.networkSearchAgents.length;
          } else {
            this.$message.warning("暂未发现设备");
          }
        })
        .catch((err) => {
          this.$message.warning("请求超时！");
        })
        .finally(() => {
          this.networkLoading = false;
        });
    },
    // 发现网络设备分页
    network_handleCurrentChange(currentPage) {
      // 设置最新的页码
      this.networkPage.currentPage = currentPage;
    },

    // 重置表单
    resetForm() {
      this.snmpIsShow = false;
      this.formData = {
        hostid: "",
        host: "",
        type: "1",
        bulk: "1",
        community: "{$SNMP_COMMUNITY}",
        dns: "",
        // groupIds: [],
        ip: "",
        port: "10050",
        // templateIds: [],
        useip: "IP",
        version: "2",
        description: "",
        systemType: "1",
        hostType: "",
        cpuType: "",
        memory: "",
      }; // 重置数据
    },
    //自动发现设备弹出添加窗口
    handleCreateByNetworkRule(val) {
      console.log(val);
      // 弹出新增窗口
      this.dialogFormVisible = true;
      //重置校验
      this.resetValidate();
      //重置表单
      this.resetForm();
      // 设置自动填写数据
      if (val.sysType === "Windows" || val.sysType === "Linux") {
        this.formData.type = "1";
        this.formData.port = "10050";
        if (val.sysType === "Windows") {
          this.formData.systemType = "2";
        } else {
          this.formData.systemType = "1";
        }
        this.snmpIsShow = false;
      } else if (val.sysType === "SNMP") {
        this.snmpIsShow = true;
        this.formData.type = "2";
        this.formData.port = "161";
        this.formData.community = val.snmpCommunity;
      }
      this.formData.host = val.hostName;
      this.formData.ip = val.ip;
    },
    isShowInfo(selVal) {
      this.selVal = selVal;
      this.snmpIsShow = selVal !== "1";

      // 修改设备默认端口
      if (this.formData.type === "1") {
        this.formData.port = "10050";
      } else {
        this.formData.port = "161";
      }
    },
    //重启主机时关闭对话框重置表单
    resetInfo() {
      this.hostAccount = "";
      this.hostPassword = "";
    },
    //重置校验
    resetValidate() {
      if (this.$refs["formData"] !== undefined) {
        this.$refs["formData"].resetFields();
      }
      if (this.$refs["userInfo"] !== undefined) {
        this.$refs["userInfo"].resetFields();
      }
    },
    //
    networkSettingClick() {
      this.currentPageNetworkSetting = [];
      this.networkSettingPage.currentPage = 1;
      this.networkRuleSettingVisible = true;
      this.$axios({
        method: "get",
        url: "/networkSearch/getAllNetworkRules.action",
      })
        .then((res) => {
          this.currentPageNetworkSetting = res.data.content.res;
          this.networkSearchRuleTotal = this.currentPageNetworkSetting.length;
          // console.log(res)
        })
        .catch();
    },
    // 删除当前网络规则
    deleteNetworkRule(val) {
      this.$axios({
        method: "post",
        url: "/networkSearch/deleteNetworkRulesByID.action",
        params: {
          id: val.details.druleid,
          name: val.details.name,
        },
      }).then((res) => {
        if (res.data.status == true) {
          this.networkSettingClick();
          this.handleNetworkSearch();
          this.$message.warning("删除网络规则成功！");
        } else {
          this.$message.warning("删除网络规则错误！");
        }
      });
    },
    // 启用网络规则
    activeNetwork(val) {
      this.$axios({
        method: "post",
        url: "/networkSearch/updateNetworkRulesByStatus.action",
        params: {
          id: val.details.druleid,
          status: "0",
        },
      }).then((res) => {
        // console.log(res)
        this.networkSettingClick();
        this.handleNetworkSearch();
      });
    },
    // 禁用网络规则
    banNetwork(val) {
      this.$axios({
        method: "post",
        url: "/networkSearch/updateNetworkRulesByStatus.action",
        params: {
          id: val.details.druleid,
          status: "1",
        },
      }).then((res) => {
        // console.log(res)
        this.networkSettingClick();
        this.handleNetworkSearch();
      });
    },
    // 新增网络规则点击
    addNetworkRule() {
      this.addNetworkRuleSettingVisible = true;
      this.snmpIsShow_net = false;
      this.resetNetForm();
    },
    // 判断类型
    isShowSNMPInfo(selVal) {
      if (selVal === "2") {
        this.snmpIsShow_net = true;
      } else {
        this.snmpIsShow_net = false;
      }
    },
    // 确认添加
    handleAddNetwork(networkFormData) {
      this.$refs[networkFormData].validate((valid) => {
        if (valid) {
          axios
            .post(
              "/networkSearch/createNetworkRule.action",
              this.networkFormData
            )
            .then((res) => {
              if (res.data.status) {
                // 执行成功
                // 关闭新增窗口
                this.addNetworkRuleSettingVisible = false;
                // 新增成功后，重新调用分页查询方法，查询出最新的数据
                this.networkSettingClick();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              } else {
                // 执行失败
                let error_mes = res.data.content.error_code;
                this.$message.error(error_mes);
              }
            });
        } else {
          this.networkLoading = false;
          return false;
        }
      });
    },
    // 添加设备
    handleAdd(formData) {
      this.networkLoading = true;
      this.$refs[formData].validate((valid) => {
        if (valid) {
          axios.post("/host/createHost.action", this.formData).then((res) => {
            if (res.data.status) {
              // 执行成功
              // 关闭新增窗口
              this.dialogFormVisible = false;
              // 新增成功后，重新调用分页查询方法，查询出最新的数据
              this.handleNetworkSearch();
              // 弹出提示信息
              this.networkLoading = false;
              this.$message({
                message: res.data.content.message,
                type: "success",
              });
            } else {
              // 执行失败
              // 弹出提示
              this.networkLoading = false;
              this.$message.error(res.data.content.message);
            }
          });
        } else {
          this.networkLoading = false;
          return false;
        }
      });
    },
    // 重置表单
    resetNetForm() {
      this.networkFormData.ruleName = "";
      this.networkFormData.ipRange = "";
      this.networkFormData.ruleType = "1";
      this.networkFormData.community = "";
      this.snmpIsShow_net = false;
    },
    // 页码跳转
    networkSetting_handleCurrentChange(currentPage) {
      // 设置最新的页码
      this.networkSettingPage.currentPage = currentPage;
    },
    // 从xml文件获取community配置
    getSnmpComuunityByXML() {
      this.$axios({
        method: "get",
        url: "/networkSearch/getSnmpCommunitByXML.action",
      }).then((res) => {
        if (res.data.status == true) {
          this.communitySettingVisible = true;
          this.communitSettingList = res.data.content.communitySetting;
          this.communityData.community_total = this.communitSettingList.length;
        }
      });
    },
    //handle处理的是选中的触发器
    handleSelectionChange(val) {
      this.networkFormData.community = val.community;
      this.communitySettingVisible = false;
    },
    community_current_change() {
      this.communityData.community_current_page = currentPage;
    },
    adivceInfoClick() {
      console.log("123");
    },
  },
};
</script>

<style scoped>
.main {
  height: 89vh;
  width: 100%;
  margin-top: 60px;
  padding: 10px;
  overflow-y: hidden;
}
.hostAvailable {
  background-color: green;
}

.content {
  margin-top: 0;
  width: 100%;
  overflow-x: hidden;
}

.buttonText {
  color: #2ac06d;
}
.itemInfo-middle-type {
  display: inline;
  line-height: 50px;
}
.itemInfo-middle-type div {
  display: inline;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  line-height: 50px;
  color: #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.itemInfo-middle-type-last {
  border-right: 1px solid #d9d9d9;
}
</style>
